<template>
  <van-pull-refresh v-model="isFresh" @refresh="onRefresh">
    <div class="home">
      <teleport to=".app-header">
        <van-nav-bar class="navBar">
          <template #left>
            <router-link to="/category">
              <van-icon
                name=""
            /></router-link>
          </template>
          <template #title>
            <van-search
              v-model="value"
              shape="round"
              background="transparent"
              placeholder="请输入搜索关键词"
            />
          </template>
          <template #right>
            <router-link to="/login" :style="{ color: '#fff' }">登录</router-link>
          </template>
        </van-nav-bar>
      </teleport>
      <teleport to=".app-page">
        <div class="slider-bg"></div>
      </teleport>
      <div class="swiper"></div>
      <!-- Home---{{ msg }} ---- {{ getLoginStatus() }} --- {{ getLoginUserId() }} -->
      <ul class="list" v-if="list.length > 0">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          class="row"
        >
          <van-cell class="col" span="10" v-for="(item, index) in list" :key="index">
            <img :src="item.img1" alt="" />
            <p class="title">{{ item.proname }}</p>
            <p class="price">
              {{ ((item.originprice * item.discount) / 10).toFixed(2) }}
            </p>
          </van-cell>
        </van-list>
      </ul>
    </div>
  </van-pull-refresh>
</template>

<script setup>
import { ref, reactive, watchEffect } from "vue";
import { getRecommendListAPI } from "@/api/pro.js";
import { showFailToast } from "vant";

let list = ref([]);
let params = reactive({
  count: 1,
  limitNum: 10,
});
let isFresh = ref(false);
let loading = ref(false);
let finished = ref(false);

watchEffect(async () => {
  console.log("watchEffect被触发", params.count);
  try {
    var res = await getRecommendListAPI(params);
    if (res) {
      // 懒加载 -> 瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。
      console.log("数据请求成", res);
      list.value.push(...res.data);
      loading.value = false;

      if (params.count >= 10) {
        finished.value = true;
      }
    }
  } catch (err) {
    showFailToast(err.message);
  }
});

let onLoad = async () => {
  // 监听到达底部  -> 默认开启加载
  params.count++; // 加载下一页
  console.log("到达底部", params.count);
};

let onRefresh = async () => {
  list.value = []; // 刷新时 清空list
  // params.count = 1; // 页码重置为1
  params.count = Math.round(Math.random() * 9 + 1); // 页码重置为1

  try {
    var res = await getRecommendListAPI(params);
    if (res) {
      // 懒加载 -> 瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。
      console.log("数据请求成", res);
      list.value.push(...res.data);
      isFresh.value = false;
    }
  } catch (err) {
    showFailToast(err.message);
  }
};
</script>

<style lang="scss" scoped>
.home {
  padding-bottom: 1rem;
}
.navBar {
  background-color: transparent;
}
.swiper {
  height: 4rem;
  background: #f66;
}

.list {
  background-color: #fff;
}
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .col {
    width: 47%;
    margin-top: 0.15rem;
    .title {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .price {
      text-align: left;
    }

    img {
      width: 100%;
      margin: 0.15rem;
    }
  }
}
.slider-bg {
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#f1503b),
    color-stop(50%, #c82519)
  );
  background-image: -webkit-linear-gradient(bottom, #f1503b, #c82519 50%);
  background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
  position: absolute;
  top: 0;
  left: -25%;
  height: 3.25rem;
  width: 150%;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  z-index: -1;
}
</style>
